<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>25.3 ui-router</title>
    <link rel="stylesheet" href="../../lib/bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../lib/bootstrap3/css/dashboard.css">
    <script src="../../lib/angularjs/angular.js"></script>
    <script src="../../lib/angularjs/angular-ui-router.min.js"></script>
</head>
<body ng-app="helloworld">
    <a ui-sref="hello" ui-sref-active="active">Hello</a>
    <a ui-sref="about" ui-sref-active="active">About</a>
    <ui-view></ui-view>
</body>
<script>
    var myApp = angular.module('helloworld', ['ui.router']);
    /** 注册路由状态 **/
    myApp.config(function($stateProvider) {
        /** 创建一个路由状态  name:状态名称，url:当状态为活动状态时，浏览器的URL将为/ hello，template:template：string定义状态的视图。当状态为活动状态时，此视图将被加载到视口中。**/
        var helloState = {
            name: 'hello',
            url: '/hello',
            template: '<h3>hello world!</h3>'
        }

        /** 创建第二个路由状态  **/
        var aboutState = {
            name: 'about',
            url: '/about',
            template: '<h3>Its the UI-Router hello world app!</h3>'
        }

        $stateProvider.state(helloState);
        $stateProvider.state(aboutState);
    });
</script>
</html>